<!--  -->
<template>
<div class='mask' @click="$emit('closeAds')" v-if="adsFlag">
      <div class="content" @click.stop>
        <img class="ads-img" :src="adsInfo.image"  v-if="adsInfo.image"/>
        <div v-else class="ads-img"></div>
        <div class="title">{{adsInfo.short_title}}</div>
        <div class="msg">
          {{adsInfo.summary}}         
        </div>
        <router-link tag="button" :to="{name:'activities',params:{id:adsInfo.article_id}}" class="check-info flex justify-center aligin-center">查看详情</router-link>
        <span class="close-icon" @click="$emit('closeAds')"></span>
      </div>
  </div>
</template>

<script>

export default {
components: {},
props:{
     adsFlag:{
        type:Boolean,
        default:()=>{
          return false
        }
      },
      adsInfo:{
        type:Object,
        default:()=>{
          return {}
        }
      }
},
data() {
return {

};
},
computed: {},
watch: {},
methods: {

},
created() {

},
mounted() {

},
updated() {}, //生命周期 - 更新之后
destroyed() {}, //生命周期 - 销毁完成
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  z-index: 998;
  &::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
}
.content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  z-index: 998;
  width: 245px;
  border-radius: 5px;
  background: #fff;
  animation: show 0.3s 1;
  box-shadow:14px 25px 16px 7px rgba(0, 0, 0, 0.05);
  @keyframes show {
    0% {
      opacity: 0;
      transform: scale(1.5);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}
.ads-img{
  width: 100%;
  height: 105px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.title{
  margin-top: 12px;
  text-align: center;
  color: #FF6633
}
.msg{
  margin: 13px auto;
  text-align: center;
  font-size: 10px;
  line-height: 16px;
  width: 121px;
}
.check-info{
  margin:27px auto 23px;
  width: 100px;
  height: 28px;
  border-radius: 12px;
  background: #FF6633;
  color: #fff;
  font-size: 12px;
}
.close-icon{
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(20px,-20px);
  width: 18px;
  height: 18px;
  background: url("../assets/imgs/close.png");
  background-size: 100% 100%;
}
</style>